import React, { Component } from 'react'
import Footer from './components/Footer'
import Header from './components/Header'
import List from './components/List'
import { Layout } from 'antd';
import './App.moudle.css'
export default class App extends Component {
    state = {
        todos: [
            { id: '001', name: '吃饭', done: true },
            { id: '002', name: '睡觉', done: false },
            { id: '003', name: '学习', done: true },
            { id: '004', name: '运动', done: false }
        ]
    }
    addTodo = (todoObj) => {
        this.setState({ todos: [todoObj, ...this.state.todos] })
    }

    updateTodo = (id, done) => {
        const { todos: oldTodos } = this.state
        const todos = oldTodos.map(todo => {
            if (todo.id === id) {
                return { ...todo, done }
            } else {
                return todo
            }
        })
        this.setState({ todos })
    }
    deleteTodo = (id) => {
        const { todos: oldTodos } = this.state
        const todos = oldTodos.filter(todo => {
            return todo.id !== id
        })
        this.setState({ todos })
    }
    checkAllTodos = (done) => {
        const { todos: oldTodos } = this.state
        const todos = oldTodos.map(todo => {
            return { ...todo, done }
        })
        this.setState({ todos })
    }
    deleteAllDoneTodos = () => {
        const { todos: oldTodos } = this.state
        const todos = oldTodos.filter(todo => {
            return !todo.done
        })
        this.setState({ todos })
    }
    render() {
        const { Content } = Layout;
        const { todos } = this.state;
        return (
            <Layout className="layout">
                <Content className="content">
                    <Header addTodo={this.addTodo} />
                    <List
                        todos={todos}
                        updateTodo={this.updateTodo}
                        deleteTodo={this.deleteTodo}
                    />
                    <Footer
                        todos={todos}
                        checkAllTodos={this.checkAllTodos}
                        deleteAllDoneTodos={this.deleteAllDoneTodos}
                    />
                </Content>
            </Layout>
        )
    }
}
